<template>
  <div class="goods">
    <page-search
      :search-config="searchConfig"
      @resetClick="handleSearchReset"
      @queryClick="handleSearchQuery"
    />
    <page-content
      :content-config="contentConfig"
      ref="contentRef"
      @createRecord="handleCreateRecord"
      @editRecord="handleEditRecord"
    >
      <template #status="scope">
        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" disable-transitions>
          {{ scope.row.status === 1 ? '已上架' : '已下架' }}
        </el-tag>
      </template>
      <template #img="scope">
        <span class="img-wrap" v-if="isValidWebUrl(scope.row.imgUrl)">
          <img class="good-img" :src="scope.row.imgUrl" alt="" />
        </span>
      </template>
    </page-content>
    <page-modal ref="modalRef" :modal-config="modalConfig" />
  </div>
</template>

<script setup lang="ts">
import searchConfig from '@/views/main/product/goods/config/search.config';
import contentConfig from '@/views/main/product/goods/config/content.config';
import modalConfig from '@/views/main/product/goods/config/modal.config';
import usePageContent from '@/hooks/usePageContent';
import usePageModal from '@/hooks/usePageModal';

const { contentRef, handleSearchReset, handleSearchQuery } = usePageContent();
const { modalRef, handleCreateRecord, handleEditRecord } = usePageModal();
function isValidWebUrl(url: string): boolean {
  // 正则表达式验证网址格式
  const urlPattern = /^(http|https):\/\/[^ "]+(\.[^ "]+)+$/;

  return urlPattern.test(url);
}
</script>

<style scoped lang="scss">
.goods {
  .img-wrap {
    display: inline-block;
    padding: 4px;
    width: fit-content;
    background-color: #f2f2f2;
    border-radius: 4px;
    .good-img {
      display: inline-block;
      height: 144px;
      width: auto;
      object-fit: contain;
      overflow: hidden;
    }
  }
}
</style>
